<template>
  <view class="y-padding y-border-radius">
    <view class="evaluatePictures y-flex">
      <view @click="addImg" v-if="mode !== 'R'" class="y-margin-right y-flex y-flex-column y-flex-center border-grey y-border-radius img-card">
        <image :src="imageUrlone+'/evaluate/camera.svg'" class="y-icon"></image>
        <text class="y-size-mini">添加图片</text>
      </view>
      <view class="y-flex y-scroll-x">
        <view class=" y-pos-relative img-card y-border-radius y-margin-right" v-for="(src, index) in evaluatePictures" :key="src">
          <image class="img-card y-border-radius" :src="src" />
          <view class="y-expand-scope close y-pos-absolute" @click="del" :data-src="src" v-if="mode !== 'R'">
            <image class="close y-pos-absolute" :src="imageUrlone+'/evaluate/close-white.svg'" mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import util from '../../lib/util.js';
export default {
  name: 'EvaluateContent',
  data() {
    return {
      mode: 'C',
      evaluatePictures: [],
      imageUrlone:this.imageUrl
    };
  },
  methods: {
    addImg() {
      uni.chooseImage({
        sizeType: ['compressed'],
        success: ({ tempFilePaths }) => {
          this.evaluatePictures = tempFilePaths.concat(this.evaluatePictures).slice(0, 9);
          this.$emit('picChange', this.evaluatePictures);
        }
      });
    },
    del(e) {
      this.evaluatePictures.splice(this.evaluatePictures.findIndex(item => item === e.target.dataset.src), 1);
      this.$emit('picChange', this.evaluatePictures);
    }
  }
};
</script>

<style lang="scss" scoped>
.img-card {
  width: 136rpx;
  height: 136rpx;
  flex-shrink: 0;
  overflow: hidden;
}
.border-grey {
  border: 1px dashed #bfc4ca;
  color: #bec2c8;
}
.close {
  right: 0;
  top: 0;
  width: 26rpx;
  height: 26rpx;
  background-color: #919298;
  border-radius: 0px $border-radius 0px $border-radius;
  // border: 1px solid #FFFFFF;
}
</style>
